<template>
    <div>
      <el-card class="box-card">
            <!-- 头部区域 -->
            <template #header>
                <div class="header">
                    <span>教师个人信息</span>
                </div>
            </template>
            <!-- 表单 提交-->
            <el-form ref="form" :model="tea" label-width="80px" v-if="!issubmit">
                <el-form-item label="个人姓名:">
                    <el-input v-model="tea.name"></el-input>
                </el-form-item>
                <el-form-item label="工号:">
                    <el-input v-model="tea.teano"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input v-model="tea.phone"></el-input>
                </el-form-item>
                <el-form-item label="图片上传:">
                    <el-upload class="avatar-uploader" action="http://localhost:8080/avatar/upload"
                        :show-file-list="false" :on-success="addhandleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                </el-form-item>
            </el-form>

            <!-- 表单 修改-->
            <el-form ref="form" :model="teamsg" label-width="80px" v-if="issubmit">
                <el-form-item label="个人姓名:">
                    <el-input v-model="teamsg.name" ></el-input>
                </el-form-item>
                <el-form-item label="工号:">
                    <el-input v-model="teamsg.teano"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input v-model="teamsg.phone"></el-input>
                </el-form-item>
                <el-form-item label="图片上传:">
                    <el-upload class="avatar-uploader" action="http://localhost:8080/avatar/upload"
                        :show-file-list="false" :on-success="updatehandleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onUpdate">修改</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</template>

<script>
import request from '@/utils/request';
export default {
  data() {
    return {
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            //教师信息
            tea: {
                userid: '',
                name: '',
                teano: '',
                phone: '',
                avatar: '',
            },

            teamsg:{
                teaid: '',
                userid: '',
                name: '',
                teano: '',
                phone: '',
                avatar: ''
            },
            imageUrl: '',
            issubmit: false,
    }
  },
  created(){
    this.tea.userid=this.user.data.userid
    this.getteaData()
  },
    methods: {
        //信息提交
        onSubmit() {
            request.post("/tea/addTea", this.tea).then(res => {
                if (res.data.code == '0') {
                    this.$message.success('填写成功')
                    this.issubmit = true
                    this.getteaData()
                } else {
                    this.$message.error('填写失败')
                }
            }
            ).catch(error => {
                console.error("填写时发生错误:", error);
                this.$message({
                    message: '填写时发生错误，请重试',
                    type: 'error'
                });
            });
        },
        
        //信息修改
        onUpdate(){
            request.put("/tea/updateTea",this.teamsg).then(res =>{
               if(res.data.code == '0'){
                this.$message.success('修改成功')
                this.getteaData()
               }else{
                this.$message.error('修改失败')
               }
            }).catch(error => {
                console.error("修改时发生错误:", error);
                this.$message({
                    message: '修改时发生错误，请重试',
                    type: 'error'
                });
            });
        },

        //获取教师提交信息
         getteaData() {
             request.get("/tea/findtea",{params:{
                id:this.user.data.userid
             }}).then(res=>{
                  console.log(res.data)
                  console.log(res.data.data)
                  console.log(res.data.code)
                if (res.data.code == 0) {
                    this.issubmit=true
                    this.$message.success('成功获取个人信息');
                    this.imageUrl=res.data.data.avatar
                    this.teamsg=res.data.data
                    console.log(this.teamsg)
                } else {
                    this.$message.error('请填写个人信息');
                }
             }).catch(error => {
                console.error("获取信息时发生错误:", error);
                this.$message({
                    message: '获取信息时发生错误，请重试',
                    type: 'error'
                });
            });
        },
              
           
        addhandleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.tea.avatar = res.data
        },

        updatehandleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.teamsg.avatar = res.data
        },

        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }


    }
}
</script>

<style lang="less" scoped>
.box-card {
    width: 100%;
    color: #000;
}

.el-input {
    width: 60%;
}

/* 头像上传样式 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>